<template>
	<view class="detail">
		<view class="header con_auto">
			<view class="header_logo">
				<u-image :src="listData.avatar" width="100rpx" height="100rpx" radius="20rpx"></u-image>
			</view>
			<view class="header_con">
				<view class="t">{{ listData.name }}</view>
				<view class="b">
					性别:
					<text class="size_normal" v-if="listData.gender == 0">未知</text>
					<text class="size_normal" v-if="listData.gender == 1">男士</text>
					<text class="size_normal" v-if="listData.gender == 2">女士</text>
				</view>
			</view>
			<view class="header_right">
				<!-- <u-button type="primary" size="mini" text="解除绑定"></u-button> -->
			</view>
		</view>
		<view class="item con_auto">
			<u-cell title="会员头像">
				<view slot="value">
					<u--image :src="listData.avatar" width="80rpx" height="80rpx"></u--image>
				</view>
			</u-cell>
			<u-cell title="会员姓名" :value="listData.nickname"></u-cell>
			<u-cell title="会员性别" :value="listData.gender == 1 ? '男' : '女'"></u-cell>
			<u-cell title="跟进记录" isLink :value="listData.follow_time || ''" :url="'/pages/work/follow-up/follow-up?id=' + listData.id"></u-cell>
			<u-cell title="备注描述" :border="false" isLink value="查看描述" @click="openRemark"></u-cell>
		</view>
		<view class="item con_auto">
			<u-cell title="会员电话" :value="listData.mobile"></u-cell>
			<u-cell title="会员卡号" :value="listData.id_card"></u-cell>
			<u-cell title="会员级别" :value="listData.member_type"></u-cell>
			<u-cell title="登记门店" :value="listData.registration"></u-cell>
			<u-cell title="会员生日" :value="listData.birthday">
				<view slot="value">
					<text v-if="listData.birthday">{{ $u.timeFormat(listData.birthday * 1000, 'yyyy年mm月dd日') }}</text>
				</view>
			</u-cell>
			<u-cell title="结婚纪念日" :border="false" :value="listData.marry_time">
				<view slot="value">
					<text v-if="listData.marry_time">{{ $u.timeFormat(listData.marry_time * 1000, 'yyyy年mm月dd日') }}</text>
				</view>
			</u-cell>
		</view>
		<view class="item con_auto">
			<u-cell title="累计消费" isLink :value="'查看明细'" :url="'/pages/work/consumption/consumption?id=' + listData.id"></u-cell>
			<u-cell title="可用储值" isLink :value="listData.stored_value"></u-cell>
			<u-cell title="可用积分" isLink :value="listData.user_integral"></u-cell>
			<!-- <u-cell title="可用电子券" isLink value="老凤祥"></u-cell> -->
			<u-cell title="会员标签" :border="false" isLink :value="listData.member_tags"></u-cell>
		</view>
		<view class="item con_auto">
			<u-cell title="国庆到店领取礼品" isLink :value="listData.gift_national_day"></u-cell>
			<u-cell title="七夕到店领取礼品" isLink :value="listData.gift_birthday"></u-cell>
			<u-cell title="生日领礼品" isLink :value="listData.gift_qixi"></u-cell>
			<!-- <u-cell title="接待日期" isLink value="老凤祥"></u-cell>
			<u-cell title="预约进店时间" isLink value="1995-08-01"></u-cell>
			<u-cell title="接待时常" isLink value="1995-08-01"></u-cell>
			<u-cell title="进店方式" isLink value="1995-08-01"></u-cell>
			<u-cell title="意向类型" isLink value="1995-08-01"></u-cell>
			<u-cell title="意向深度" isLink value="1995-08-01"></u-cell>
			<u-cell title="意向款式" isLink value="1995-08-01"></u-cell>
			<u-cell title="跟进情况" isLink value="1995-08-01"></u-cell>
			<u-cell title="跟进结果" isLink value="1995-08-01"></u-cell>
			<u-cell title="购买用途" isLink value="1995-08-01"></u-cell>
			<u-cell title="性格判断" isLink value="1995-08-01"></u-cell>
			<u-cell title="购买预算" isLink value="1995-08-01"></u-cell>
			<u-cell title="客户在意" isLink value="1995-08-01"></u-cell>
			<u-cell title="未成交原因" isLink value="1995-08-01"></u-cell>
			<u-cell title="电话预约" isLink value="1995-08-01"></u-cell>
			<u-cell title="是否推荐" :border="false" isLink value="1995-08-01"></u-cell> -->
		</view>
		<view class="footer_empty u-safe-area-inset-bottom"></view>
		<view class="footer u-safe-area-inset-bottom">
			<view class="footer_li">
				<view class="footer_li_btn record" @tap.stop="$navTo('/pages/work/add_follow/add_follow?user_id=' + listData.id)">添加跟进</view>
				<view class="footer_li_btn wx" @tap.stop="openUser">微信联系</view>
				<view class="footer_li_btn phone" @tap.stop="callPhone">拨打电话</view>
			</view>
		</view>
		<u-modal :show="showModal" title="备注描述" cancelText="关闭" confirmText="保存/修改" showCancelButton @cancel="showModal = false" @confirm="saveRemark">
			<view class="slot-content" style="width: 600rpx">
				<u--textarea
					v-model="listData.remark"
					placeholder="请输入备注描述"
					:placeholderStyle="{
						color: 'rgba(51,51,51,0.2)'
					}"
					maxlength="500"
					count
				></u--textarea>
			</view>
		</u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			detailId: 0,
			listData: {},
			showModal: false
		};
	},
	onLoad({ id }) {
		if (!id) {
			uni.navigateBack();
		}
		this.detailId = id;
		this.$initConfig().then((_) => {
			this.getInfo();
		});
	},
	methods: {
		saveRemark() {
			let _this = this;
			_this
				.$http('crop/setCorpByRemark', {
					id: _this.listData.id,
					remark: _this.listData.remark
				})
				.then((res) => {
					if (res.code) {
						_this.showModal = false;
						_this.$u.toast(res.msg);
					}
				});
		},
		openRemark() {
			this.showModal = true;
		},
		getInfo() {
			let _this = this;
			_this
				.$http('crop/getCropByIdInfo', {
					id: _this.detailId
				})
				.then((res) => {
					if (res.code) {
						_this.listData = res.data;
					}
				});
		},
		openUser() {
			const item = this.listData;
			const _this = this;

			if (item.type === 1) {
				wx.qy.openEnterpriseChat({
					externalUserIds: item.ExternalUserID, //可以是企业成员，也可以是外部联系人
					groupName: '',
					success: function (res) {
						// 回调
						_this.$http('crop_chat/setTemplateNotice', {
							chatId: res.chatId,
							user_id: item.ExternalUserID,
							status: 1
						});
						console.log(res);
					},
					fail(err) {
						console.log(err);
						uni.$u.toast(err.errMsg);
						_this.$http('crop_chat/setTemplateNotice', {
							chatId: res.chatId,
							user_id: item.ExternalUserID,
							status: 2
						});
					}
				});
			} else {
				wx.qy.openEnterpriseChat({
					userIds: item.ExternalUserID, //可以是企业成员，也可以是外部联系人
					groupName: '',
					success: function (res) {
						// 回调
						uni.$u.toast(res);
						console.log(res);
					},
					fail(err) {
						console.log(err);
						uni.$u.toast(err.errMsg);
					}
				});
			}
		},
		callPhone() {
			if(!this.listData.mobile){
				this.$u.toast('用户没有填写手机号')
				return
			}
			uni.makePhoneCall({
				phoneNumber: this.listData.mobile
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.header {
	background: #fff;
	border-radius: 20rpx;
	margin-top: 20rpx;
	display: flex;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	align-items: center;
	&_logo {
		padding-left: 20rpx;
		margin-right: 20rpx;
	}
	&_con {
		flex: 1;
		.b {
			font-size: 28rpx;
			color: $common-grey-color;
			margin-top: 10rpx;
		}
	}
	&_right {
		padding: 0 20rpx;
	}
}
.item {
	background: #fff;
	margin-top: 20rpx;
	border-radius: 20rpx;
}
.footer {
	background: #fff;
	position: fixed;
	bottom: 0;
	width: 100%;
	&_li {
		display: flex;
		justify-content: space-around;
		&_btn {
			width: 100%;
			padding: 30rpx 0;
			text-align: center;
		}
		.record {
			background-color: $common-color-warning;
			color: #fff;
		}
		.wx {
			background-color: $common-color-success;
			color: #fff;
		}
		.phone {
			background-color: $common-color-primary;
			color: #fff;
		}
	}
}
</style>
